<template>
  <div class="">
    <div id="gesture"></div>
  </div>
</template>

<script>
import $ from 'jquery'
import '@/utils/jquery.gesture.password.min.js'
export default {
  props: {
    isCheck: {
      type: Boolean,
      default: true
    },
    pwd: {
      type: String,
      default: '1235789'
    }
  },
  data () {
    return {}
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      const that = this
      $(function () {
        $('#gesture').GesturePasswd({
          backgroundColor: '#ddd', // 背景色
          color: '#FFFFFF', // 主要的控件颜色
          roundRadii: 25, // 大圆点的半径
          pointRadii: 6, // 大圆点被选中时显示的圆心的半径
          space: 30, // 大圆点之间的间隙
          width: 240, // 整个组件的宽度
          height: 240, // 整个组件的高度
          lineColor: '#00aec7', // 用户划出线条的颜色
          zindex: 100 // 整个组件的css z-index属性
        })
        $('#gesture').on('hasPasswd', function (e, passwd) {
          if (that.isCheck) {
            if (passwd === that.pwd) {
              $('#gesture').trigger('passwdRight')
              that.$success({ title: '验证成功' })
              that.$emit('success')
            } else {
              $('#gesture').trigger('passwdWrong')
              that.$error({ title: '验证失败' })
              that.$emit('error')
            }
          } else {
            $('#gesture').trigger('passwdRight')
            that.$emit('change', passwd)
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
